<template>
	<view class="u-p-l-30 u-p-r-30 u-p-b-30 logincontainer">
		<u-form :model="addModel" ref="form1" class="forms">
			<u-form-item label="昵称" prop="nickName" label-width="auto">
				<u-input placeholder="请输入昵称" v-model="addModel.nickName" />
			</u-form-item>
			<u-form-item label="姓名" prop="name" label-width="auto">
				<u-input placeholder="请输入姓名" v-model="addModel.name" />
			</u-form-item>
			<u-form-item label="电话" prop="phone" label-width="auto">
				<u-input placeholder="请输入电话" v-model="addModel.phone" />
			</u-form-item>
			<u-form-item prop="picture" label-width="auto" label="头像:">
			</u-form-item>
			<u-upload  max-count="1" ref="imgRef" @on-change="onChange" @on-remove="onRemove" :action="action" :file-list="fileList">
			</u-upload>
		</u-form>
		<u-button @click="commit" shape="circle" style="width: 100%;padding-top: 10px;" type="success">确定修改</u-button>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref
	} from 'vue';
	import http from '../../src/common/http.js'
	import {
		editApi
	} from '../../src/api/user.js'
	//图片上传的ref属性
	const imgRef = ref()
	//表单ref属性
	const form1 = ref()
	const addModel = reactive({
		userId: uni.getStorageSync("userId"),
		nickName: '',
		name: '',
		picture: '',
		phone: ''
	})
	//表单验证规则
	const rules = reactive({
		phone: [{
			required: true,
			message: '请输入电话',
			trigger: ['change']
		}],
		nickName: [{
			required: true,
			message: '请输入昵称',
			trigger: ['change']
		}],
		name: [{
			required: true,
			message: '请输入姓名',
			trigger: ['change']
		}],
		picture: [{
			required: true,
			message: '请上传头像',
			trigger: ['change']
		}],
	})
	const onChooseAvatar = (e) => {
		console.log(e)
	}
	const action = ref(http.baseUrl + '/api/upload/uploadImage')
	const fileList = ref([])
	//存储图片的地址
	const imgUrl = ref([])
	//图片上传触发
	const onChange = (res, index, lists, name) => {
		console.log(res.data)
		let result = JSON.parse(res.data)
		console.log(http.baseUrl + result.data)
		imgUrl.value.push(http.baseUrl + result.data)
		//转为逗号分隔的字符串  aa.png,bb.png
		let url = "";
		for (let k = 0; k < imgUrl.value.length; k++) {
			url = url + imgUrl.value[k] + ','
		}
		// console.log(url)
		//末尾的逗号去掉
		addModel.picture = url.substring(0, url.lastIndexOf(','))
		console.log(addModel)
	}
	//删除图片时触发
	const onRemove = (index, lists, name) => {
		console.log(index)
		//删除数组里面的数据
		imgUrl.value.splice(index, 1);
		let url = "";
		for (let k = 0; k < imgUrl.value.length; k++) {
			url = url + imgUrl.value[k] + ','
		}
		// console.log(url)
		//末尾的逗号去掉
		addModel.picture = url.substring(0, url.lastIndexOf(','))
		console.log(addModel)

	}
	//表单提交
	const commit = () => {
		form1.value.validate(async (valid) => {
			if (valid) {
				let res = await editApi(addModel)
				if (res && res.code == 200) {
					uni.navigateBack({
						delta: 1
					})
				}
			}
		})
	}
	onReady(() => {
		form1.value.setRules(rules)
		//设置图片数据
		imgRef.value.lists = fileList.value
	})
	onLoad((option) => {
		console.log(option)
		//转换为json对象
		let user = JSON.parse(option.user)
		console.log(user)
		//设置回显的数据
		Object.assign(addModel, user)
		//图片回显
		if (user.picture) {
			//转换为数组
			let imgs = user.picture.split(",")
			for (let j = 0; j < imgs.length; j++) {
				let obj = {
					url: ''
				}
				obj.url = imgs[j]
				fileList.value.push(obj)
			}
		}
	})
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.logincontainer {
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;

		.forms {
			width: 100%;
			padding: 10px 20px;
		}
	}

	.avatarwrap {
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 70px;
		width: 70px;
		padding: 0px;

		.uimage {
			height: 70px;
			width: 70px;
			border-radius: 50%;
			margin: 5px 0px;
		}
	}
</style>
